<template>
  <view class="select-package">
    <!-- 问卷 -->
    <view class="question" v-if="orderInfo.alcohol_type == 2" @click="openAskDialog">
      <view class="question-left">
        <span style="color: #ff0000">*</span>填写需求问卷
      </view>
      <view style="padding-top: 8px">
        <image src="/static/yes.png" class="question-img" />
      </view>
    </view>
    <view
      class="production"
      v-if="[3, 4, '3', '4'].includes(orderInfo.alcohol_type)"
      @click="openGoodsDialog"
    >
      <view class="product-item">
        <view class="flex">
          <image :src="img(allGoodsList[goodsIndex].goods_image)" class="product-img" />
          <view class="product-item-right">
            <view>{{ allGoodsList[goodsIndex].goods_name }}</view>
            <view style="color: #ccc; font-size: 14px;">规格: {{ allGoodsList[goodsIndex].sku_name }}</view>
            <view style="color: #ff0000">
              <text style="font-size: 29rpx">￥</text>
              <text style="font-size: 38rpx">
                {{ parseFloat(allGoodsList[goodsIndex].price).toFixed(2) }}
              </text>
            </view>
          </view>
        </view>
        <up-icon name="arrow-right" />
      </view>
    </view>

    <view class="section">
      <template v-if="orderInfo.alcohol_type == 1">
        <view class="section-title">
          <image src="/static/select.png" class="search-icon" />
          <view>类别选择</view>
        </view>
        <view v-for="(item, k) in orderInfo.types" :key="k" class="category-btn">
          {{ item }}
        </view>
        <view class="section-title">
          <image src="/static/select.png" class="search-icon" />
          <view>酒体选择</view>
          <text class="desc">（总体调配和须达到100%）</text>
        </view>
        <view class="liquor-list">
          <view v-for="(item, idx) in orderInfo.order_alcohol" :key="idx">
            <view class="liquor-item">
              <view class="liquor-info">
                <view v-if="item.body?.show_json?.name" class="liquor-title">
                  {{ item.alcohol_body_name }}
                </view>
                <view class="liquor-desc">
                  <view v-if="item.body?.show_json?.year">
                    年份：{{ item.body?.year }}
                  </view>
                  <view v-if="item.body?.show_json?.flavor">
                    风味特色：{{ item.body.flavor }}
                  </view>
                  <view v-if="item.body?.show_json?.recommendRatio">
                    推荐调配占比：{{ item.body?.min_percentage }}%~{{
                      item.body?.max_percentage
                    }}%
                  </view>
                  <view v-if="item.body?.show_json?.price">
                    单价：￥{{ item.original_price }}/500ml
                  </view>
                </view>
              </view>
              <image :src="img(item.body?.logo)" class="liquor-img" />
            </view>
            <view class="slider-row">
              <view>
                <slider
                  :value="item.alcohol_percentage"
                  disabled
                  block-size="15"
                  activeColor="#e9e9e9"
                  block-color="#E5E5E5"
                  class="liquor-slider"
                />
                <view class="liquor-footer">
                  <text>{{ item.alcohol_percentage }}%</text>
                  <view class="line"></view>
                  <text> ￥{{ item.allPrice }} </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <view class="section-title">
        <image src="/static/select.png" class="search-icon" />
        <view>定制容量规格</view>
      </view>
      <view class="volume-row">
        <view class="volume-picker">{{ volumes[selectedVolume] }}</view>
        <view class="stepper">
          <view class="stepper-btn" @click="changeCount(-1)">-</view>
          <input v-model="count" type="number" class="stepper-count" />
          <view class="stepper-btn" @click="changeCount(1)">+</view>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">
        <image src="/static/select.png" class="search-icon" />
        <view>包材选择</view>
      </view>
      <view>
        <u-radio-group v-model="packageValue" placement="row">
          <u-radio
            v-for="(i, k) in allPackageList"
            :key="k"
            activeColor="red"
            :label="i.category_name"
            :name="i.category_id"
          />
        </u-radio-group>
      </view>
    </view>
    <view v-for="(item, k) in packageList" :key="k" class="section">
      <view class="section-title">
        <image src="/static/select.png" class="search-icon" />
        <view>{{ item.category_name }}</view>
      </view>
      <view class="package-list">
        <view v-for="(child, idx) in item.children" :key="idx">
          <view class="package-title">{{ child.category_name }}</view>
          <view class="package-item">
            <picker
              :range="child.options"
              :value="child.selected"
              @change="selectPackage(k, idx, $event)"
            >
              <view class="picker">
                <view class="picker-text">{{
                  child.children[child.selected]?.goods_name
                }}</view>
                <image src="/static/groups.png" class="picker-img" />
              </view>
            </picker>
            <view
              v-if="child.children[child.selected]?.goods_cover_thumb_small"
              @click="toGoodsDetail(child.children[child.selected])"
              class="package-img"
            >
              <image
                :src="img(child.children[child.selected]?.goods_cover_thumb_small)"
              />
              <view class="package-desc">详情</view>
            </view>
            <view v-else class="package-img">
              <image src="../../../../static/baocai.png" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="back-arm">
      <view class="back-left">
        <view>合计：</view>
        <view class="price-text">￥{{ totalPrice || 0 }}</view>
      </view>
      <view class="back-Right" @click="createOrder">
        <text>下一步</text>
      </view>
    </view>
    <Ask-dialog ref="askDialogRef" disabled />
    <up-popup v-model:show="goodsShow" :custom-style="customStyle">
      <view>
        <view
          class="production"
          v-for="(item, index) in allGoodsList"
          :key="index"
          @click="chooseGoods(index)"
        >
          <view class="product-item">
            <view class="flex">
              <image :src="img(item.goods_image)" class="product-img" />
              <view class="product-item-right">
                <view>{{ item.goods_name }}</view>
                <view style="color: #ccc; font-size: 14px;">规格: {{ item.sku_name }}</view>
                <view style="color: #ff0000">
                  <text style="font-size: 29rpx">￥</text>
                  <text style="font-size: 38rpx">
                    {{ parseFloat(item.price).toFixed(2) }}
                  </text>
                </view>
              </view>
            </view>
            <image
              v-if="goodsIndex == index"
              src="/static/yes.png"
              class="question-img"
            />
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { computed, nextTick, ref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { img, redirect, deepClone } from "@/utils/common";
import AskDialog from "@/addon/shop/components/ask/index.vue";
import { getBaoCai, getAlcoholOrderDetail } from "@/addon/shop/api/select";

const orderId = ref(null); // 订单id
const alcoholTypeId = ref(null); // 类别ID
const orderInfo = ref({}); // 订单信息
const allPackageList = ref([]); // 包材列表
const count = ref(30); // 定制数量
const packageValue = ref(null); // 包材选择
const askDialogRef = ref(null); // 问卷弹窗
const volumes = ref(["500ml", "1000ml"]);
const selectedVolume = ref(0);
const allGoodsList = ref([]); // 所有商品列表
const packageList = ref([]); // 包材
const goodsIndex = ref(0); // 商品索引
const goodsShow = ref(false); // 商品弹窗
const customStyle = ref({
  minHeight: "280rpx",
  maxHeight: "60%",
  borderRadius: "0",
  padding: "20rpx",
  backgroundColor: "#fff",
});

const totalPrice = computed(() => {
  // 总价格
  let total = 0;
  if (!orderInfo.value.order_alcohol) return total;
  if (orderInfo.value.alcohol_type == 1) {
    orderInfo.value.order_alcohol?.forEach((i) => {
      total += parseFloat(i.allPrice) * count.value;
    });
  } else if (orderInfo.value.alcohol_type == 2) {
    let sku = parseFloat(orderInfo.value.order_sku || "0");
    let price =
      parseFloat(orderInfo.value.goods_money) + parseFloat(orderInfo.value.final_money);
    let mlPrice = ((price / sku) * 500).toFixed(2);
    total += parseFloat(mlPrice) * count.value;
  } else if (
    orderInfo.value.alcohol_type == 0 ||
    orderInfo.value.alcohol_type == 3 ||
    orderInfo.value.alcohol_type == 4
  ) {
    let price = allGoodsList.value[goodsIndex.value].price;
    let sku = allGoodsList.value[goodsIndex.value].goods_sku?.weight;
    sku = parseFloat(sku) * 1000 || 500; 
    let mlPrice = ((price / sku) * 500).toFixed(2);
    total += parseFloat(mlPrice) * count.value;
  }
  if (!packageList.value.length) return total.toFixed(2);
  packageList.value.forEach((i) => {
    i.children?.forEach((j) => {
      j.children?.forEach((k, index) => {
        if (index === j.selected && count.value >= k.min_buy) {
          total += parseFloat(k?.goodsSku?.price) * count.value;
        }
      })
    });
  });
  return total.toFixed(2);
});


watch(packageValue, (v) => {
  if (v) {
    const list = deepClone(allPackageList.value);
    packageList.value = list.filter((i) => i.category_id == v);
    packageList.value.forEach((i) => {
      i.children = i.children.map((j) => {
        if (j.children.some(k => count.value >= k.min_buy && k.goods_id != 0)) {
          j.children = j.children.filter(k => count.value >= k.min_buy);
        } else {
          j.children = j.children.filter((k) =>  k.goods_id == 0);
        }
        j.options = j.children.map((n) => n.goods_name);
        return j
      });
      i.children = i.children.filter(j => j.children.length > 1);
    })
  } else {
    packageList.value = [];
  }
});

watch(count, (v) => {
  if (v) {
    const list = deepClone(allPackageList.value);
    packageList.value = list.filter((i) => i.category_id == packageValue.value);
    packageList.value.forEach((i) => {
      i.children = i.children.map((j) => {
        if (j.children.some(k => v >= k.min_buy && k.goods_id != 0)) {
          j.children = j.children.filter(k => v >= k.min_buy);
        } else {
          j.children = j.children.filter((k) =>  k.goods_id == 0);
        }
        j.options = j.children.map((n) => n.goods_name);
        return j
      });
      i.children = i.children.filter(j => j.children.length > 1);
    })
    console.log(packageList.value);
  }
})

onLoad((e) => {
  orderId.value = e.orderId;
  getOrderInfo();
  getBaoCaiList();
});

// 获取订单信息
const getOrderInfo = () => {
  getAlcoholOrderDetail({
    order_id: orderId.value,
  }).then((res) => {
    let types = res.data.order_alcohol.map((i) => i.alcohol_type_name);
    alcoholTypeId.value = res.data.order_alcohol.length
      ? res.data.order_alcohol.map((i) => i.alcohol_type_id)[0]
      : null;
    let alcohol_type = res.data.alcohol_type.split(",");
    if (alcohol_type.includes("3") || alcohol_type.includes("4")) {
      allGoodsList.value = res.data.order_goods;
      let isPlan = allGoodsList.value[goodsIndex.value].is_bartender_plan;
      orderInfo.value = {
        ...res.data,
        types: Array.from(new Set(types)),
        alcohol_type: isPlan == 1 ? 3 : isPlan == 2 ? 4 : 0,
      };
    } else {
      let alcohols = res.data.order_alcohol;
      alcohols.forEach((i) => {
        let price =
          parseFloat(i.original_price) * (parseFloat(i.alcohol_percentage) / 100);
        i.allPrice = price.toFixed(2);
        if (i.alcohol_type == 1) {
          i.body = {
            ...i.body,
            show_json: JSON.parse(i.body.show_json),
          };
        }
      });
      orderInfo.value = {
        ...res.data,
        types: Array.from(new Set(types)),
        order_alcohol: alcohols,
      };
    }
  });
};

// 获取包材列表
const getBaoCaiList = () => {
  getBaoCai().then((res) => {
    let list = res.data;
    list.forEach((i) => {
      i.children?.forEach((j) => {
        j.selected = 0;
        j.children.unshift({
          goods_name: "请选择",
          goods_id: 0,
          goods_cover_thumb_small: "",
          min_buy: 1,
          goodsSku: {
            price: 0,
            sku_id: "",
          },
        });
        j.options = j.children.map((n) => n.goods_name);
      });
    });
    allPackageList.value = list;
    uni.pageScrollTo({ scrollTop: 0, duration: 0 });
  });
};

// 打开选择商品
const openGoodsDialog = () => {
  goodsShow.value = true;
};

// 选择商品
const chooseGoods = (index) => {
  goodsIndex.value = index;
  let isPlan = allGoodsList.value[index].is_bartender_plan;
  orderInfo.value.alcohol_type = isPlan == 1 ? 3 : isPlan == 2 ? 4 : 0;
  goodsShow.value = false;
};

// 跳转商品详情
const toGoodsDetail = (item) => {
  console.log(item);
  redirect({
    url: "/addon/shop/pages/goods/detail",
    param: { goods_id: item.goods_id },
  });
};

// 修改数量
const changeCount = (value) => {
  let val = count.value;
  if (typeof count.value !== "number") {
    val = Number(count.value);
  }
  const newCount = val + value;
  if (newCount >= 1) count.value = newCount;
};

// 选择容量
const selectPackage = (k, idx, e) => {
  nextTick(() => {
    packageList.value[k].children[idx].selected = e.detail.value;
  });
};

// 打开问卷
const openAskDialog = () => {
  const {
    username,
    phone,
    dingzhi_type,
    dingzhi_order_sn,
    dingzhi_order_id,
    is_needs_questionnaire,
    bartender_id,
    goods_money,
    deliver_day,
    dingzhi_bz_sj,
    order_alcohol,
  } = orderInfo.value;
  const {
    aromaType,
    alcoholRange,
    taste,
    flavour,
    priceRange,
    intensity,
    layer,
    comfort,
    demand,
    lips,
    lipsTaste,
    tasteStrength,
    richFeel,
    harmoniousFeel,
    sustain,
    aftertaste,
    personality,
    drunkSpeed,
    wakeSpeed,
    complexity,
    balance,
    direction,
    remark,
    scene,
    quantity,
    specialNeeds,
  } = JSON.parse(order_alcohol[0].needs_questionnaire);
  askDialogRef.value.openDialog({
    price: goods_money,
    bartender_id,
    baseForm: {
      username,
      phone,
      dingzhi_type,
      dingzhi_order_sn,
      dingzhi_order_id,
      is_needs_questionnaire,
      bartender_id,
      price: goods_money,
      deliver_day,
      dingzhi_bz_sj,
      authChecked: false,
    },
    customForm: {
      aromaType,
      alcoholRange,
      taste,
      flavour,
      priceRange,
      intensity,
      layer,
      comfort,
      demand,
      lips,
      lipsTaste,
      tasteStrength,
      richFeel,
      harmoniousFeel,
      sustain,
      aftertaste,
      personality,
      drunkSpeed,
      wakeSpeed,
      complexity,
      balance,
    },
    optimizeForm: {
      direction,
      remark,
      priceRange,
      alcoholRange,
      intensity,
      layer,
      comfort,
      demand,
      lips,
      lipsTaste,
      tasteStrength,
      sustain,
      aftertaste,
    },
    sceneForm: {
      scene,
      quantity,
      specialNeeds,
    },
  });
};

// 创建订单
const createOrder = () => {
  const { alcohol_type, order_alcohol } = orderInfo.value;
  let alcohol_bc = [];
  packageList.value.map((i) => {
    i.children.map((j) => {
      alcohol_bc.push({
        category_id: j.category_id,
        sku_id: j.children[j.selected]?.goodsSku?.sku_id,
      });
    });
  });
  alcohol_bc = alcohol_bc.filter((i) => i.sku_id); // 过滤掉没有选中的包材
  if (alcohol_type == 1) {
    let alcohol_body = order_alcohol.map((i) => {
      return {
        body_id: i.alcohol_body_id,
        percentage: i.alcohol_percentage,
      };
    });
    uni.setStorage({
      key: "orderCreateData",
      data: {
        alcohol_type: 5,
        alcohol_data: {
          type_id: alcoholTypeId.value,
          sku: 500,
          num: count.value,
          order_id: orderId.value,
          alcohol_body,
          alcohol_bc,
          order_logo: [],
        },
      },
      success() {
        redirect({ url: "/addon/shop/pages/order/payment" });
      },
    });
  } else if (alcohol_type == 2) {
    let needs_questionnaire = order_alcohol[0].needs_questionnaire;
    const {
      username,
      phone,
      dingzhi_type,
      dingzhi_order_sn,
      dingzhi_order_id,
      is_needs_questionnaire,
      bartender_id,
      deliver_day,
      dingzhi_bz_sj,
    } = orderInfo.value;
    uni.setStorage({
      key: "orderCreateData",
      data: {
        alcohol_type: 6,
        alcohol_data: {
          num: count.value,
          order_id: orderId.value,
          sku: 500,
          username,
          phone,
          dingzhi_type,
          dingzhi_order_sn,
          dingzhi_order_id,
          is_needs_questionnaire,
          bartender_id,
          deliver_day,
          dingzhi_bz_sj,
          needs_questionnaire,
          alcohol_bc,
          order_logo: [],
        },
      },
      success() {
        redirect({ url: "/addon/shop/pages/order/payment" });
      },
    });
  } else if (alcohol_type == 3 || alcohol_type == 4) {
    uni.setStorage({
      key: "orderCreateData",
      data: {
        alcohol_type: alcohol_type == 3 ? 7 : 8,
        alcohol_data: {
          num: count.value,
          order_id: orderId.value,
          sku: 500,
          sku_id: allGoodsList.value[goodsIndex.value].sku_id,
          alcohol_bc,
          order_logo: [],
        },
      },
      success() {
        redirect({ url: "/addon/shop/pages/order/payment" });
      },
    });
  }
};
</script>

<style lang="scss" scoped>
.select-package {
  min-height: 100vh;
  background: #f5f6fa;
  padding: 26rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 130rpx;
}

.section {
  width: 100%;
  background: #fff;
  border-radius: 14px;
  margin-bottom: 14px;
  padding: 30rpx 26rpx;
  box-sizing: border-box;

  .section-title {
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;

    .search-icon {
      width: 28rpx;
      height: 28rpx;
      margin-right: 8rpx;
      margin-top: 2rpx;
    }
  }
}

.back-arm {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 20rpx 40rpx;
  background: #fff;
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  height: 86rpx;
  width: 88%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .back-Right {
    background: #fff;
    width: 27%;
    text-align: center;
    border-radius: 50rpx;
    height: 76rpx;
    line-height: 76rpx;
    color: #fff;
    background: linear-gradient(to right, #ff1919, #ff4000);
  }

  .back-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    color: #3d3d3d;
    margin: 6rpx 0 0;

    view {
      color: #000;
    }

    .price-text {
      font-size: 38rpx;
      color: #ff0000;
    }
  }
}

.desc {
  color: #b1aeae;
  font-size: 13px;
  margin-left: 4rpx;
  margin-top: 3px;
}

.category-btn {
  display: inline-block;
  min-width: 180rpx;
  background: #ededed;
  color: #666;
  border-radius: 14rpx;
  text-align: center;
  font-size: 16px;
  padding: 5rpx 20rpx;
  margin: 0 8px 10px 8px;
  letter-spacing: 2px;
}

.liquor-list {
  width: 100%;

  .liquor-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    color: #757575;

    .liquor-info {
      flex: 1;
      max-width: 410rpx;
      height: 230rpx;
      margin-right: 10px;
      padding: 4px 14px 6px;
      border-radius: 10px;
      box-sizing: border-box;
      background: #f7f7f7;
      transition: all 0.3s;
    }

    .liquor-img {
      width: 244rpx;
      height: 230rpx;
      border-radius: 8px;
      object-fit: cover;
    }

    .liquor-desc {
      font-size: 12px;
      color: #666;
      line-height: 1.6;
      white-space: pre-line;
      > view {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }

  .liquor-title {
    font-size: 16px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

.slider-row {
  background: #fff;
  border: 2rpx solid #e7e7e7;
  border-radius: 10px;
  margin-bottom: 18px;
  padding: 0 10px;

  .liquor-slider {
    width: 66%;
    margin: 9px 4px;

    .uni-slider-value {
      color: #000 !important;
    }
  }

  .liquor-footer {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #333;

    .line {
      width: 1px;
      height: 34px;
      background: #e7e7e7;
      margin: 0 7px 0 15px;
    }
  }

  view {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.volume-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 0 0 10px;

  .volume-picker {
    background: #f1f1f1;
    border-radius: 30px;
    padding: 4px 30px;
    font-size: 16px;
    color: #757575;
    margin-right: 24px;
  }
}

.stepper {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  color: #a0a0a0;
  border: 1px solid #cecece;
  overflow: hidden;
  box-sizing: border-box;

  .stepper-btn {
    width: 32px;
    height: 32px;
    line-height: 32px;
    border: none;
    background: #fff;
    font-size: 16px;
    text-align: center;
    margin-top: -2px;

    &:nth-child(1) {
      border-right: 1px solid #cecece;
    }

    &:nth-child(3) {
      border-left: 1px solid #cecece;
    }
  }

  .stepper-btn:disabled {
    color: #ccc;
    background: #f5f5f5;
  }

  .stepper-count {
    font-size: 18px;
    width: 40px;
    text-align: center;
    color: #757575;
  }
}

.package-list {
  margin-top: 12px;

  .package-title {
    font-size: 17px;
    margin: 10px 10px 8px;
    font-weight: bold;
  }

  .package-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;
  }

  .picker {
    border: 1px solid #eee;
    border-radius: 8rpx;
    height: 180rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .picker-text {
      font-size: 16px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .picker-img {
      width: 40rpx;
      height: 40rpx;
      border-radius: 16rpx;
    }
  }
  .package-img {
    width: 240rpx;
    height: 180rpx;
    border-radius: 16rpx;
    margin-left: 20rpx;
    margin-top: 12rpx;
    position: relative;
    image {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }
    .package-desc {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 0 20rpx;
      color: #fff;
      border: 1rpx solid #fff;
      border-radius: 10rpx;
    }
  }
}

.production {
  width: 100%;
  background: #fff;
  border-radius: 28rpx;
  margin-bottom: 28rpx;
  padding: 14rpx;
  box-sizing: border-box;
  &:active {
    background-color: #f5f5f5;
  }

  .product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .product-img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    margin-right: 26rpx;
  }

  .product-item-right {
    font-size: 34rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100px;
  }
}

.question {
  width: 100%;
  background: #fff;
  border-radius: 14px;
  margin-bottom: 14px;
  padding: 15px 22px 15px 27px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 32rpx;

  .question-left {
  }
}
:deep(uni-picker),
:deep(picker) {
  flex: 1;
  max-width: 59.5%;
}
.question-img {
  width: 20px;
  height: 20px;
}
</style>
